@import './variables.scss';
@import './mixins.scss';
@import './common.scss';

/* 全局样式 */
page {
  font-size: $font-size-base;
  color: $text-color-primary;
  background-color: $bg-color;
  box-sizing: border-box;
  min-height: 100vh;
}

/* 页面容器 */
.page-container {
  min-height: 100vh;
  background-color: $bg-color;
}

/* 底部固定按钮区域 */
.bottom-btn-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $spacing-base;
  background-color: #fff;
  z-index: 99;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  padding-bottom: calc($spacing-base + constant(safe-area-inset-bottom));
  padding-bottom: calc($spacing-base + env(safe-area-inset-bottom));
}

/* 主按钮 */
.btn-primary {
  @include btn-primary();
  width: 100%;
  height: 80rpx;
}

/* 次级按钮 */
.btn-secondary {
  @include btn-secondary();
  width: 100%;
  height: 80rpx;
}

/* 朴素按钮 */
.btn-plain {
  @include btn-plain($primary-color);
  width: 100%;
  height: 80rpx;
}

/* 价格样式 */
.price {
  color: $primary-color;
  font-weight: bold;
  
  &::before {
    content: '¥';
    font-size: 80%;
    margin-right: 2rpx;
  }
}

/* 原价样式 */
.original-price {
  color: $text-color-placeholder;
  text-decoration: line-through;
  font-size: $font-size-sm;
  margin-left: $spacing-xs;
  
  &::before {
    content: '¥';
    font-size: 80%;
    margin-right: 2rpx;
  }
}

/* 空状态提示 */
.empty-tip {
  @include flex(column, center, center);
  padding: $spacing-xl 0;
  
  .icon {
    font-size: 120rpx;
    color: $text-color-placeholder;
    margin-bottom: $spacing-base;
  }
  
  .text {
    color: $text-color-secondary;
    font-size: $font-size-base;
  }
}

/* 商品卡片 */
.product-card {
  background-color: #fff;
  border-radius: $border-radius-base;
  overflow: hidden;
  box-shadow: $box-shadow-light;
  
  .image {
    width: 100%;
    height: 300rpx;
    background-color: $bg-color-light;
  }
  
  .content {
    padding: $spacing-base;
    
    .title {
      font-size: $font-size-md;
      font-weight: bold;
      color: $text-color-primary;
      @include text-ellipsis-multi(2);
      margin-bottom: $spacing-xs;
    }
    
    .info {
      @include flex(row, space-between, center);
      margin-top: $spacing-xs;
      
      .price-wrapper {
        @include flex(row, flex-start, center);
      }
      
      .sales {
        font-size: $font-size-sm;
        color: $text-color-secondary;
      }
    }
  }
}

/* 标签样式 */
.tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  font-size: $font-size-xs;
  border-radius: $border-radius-xs;
  margin-right: $spacing-xs;
  
  &.primary {
    background-color: $primary-color-light;
    color: $primary-color;
  }
  
  &.secondary {
    background-color: $secondary-color-light;
    color: $secondary-color;
  }
}

/* 搜索框 */
.search-box {
  background-color: #fff;
  padding: $spacing-sm $spacing-base;
  
  .search-input {
    @include flex(row, flex-start, center);
    background-color: $bg-color-light;
    border-radius: $border-radius-md;
    padding: $spacing-xs $spacing-sm;
    height: 60rpx;
    
    .icon {
      margin-right: $spacing-xs;
    }
    
    .input {
      flex: 1;
      height: 100%;
      font-size: $font-size-base;
    }
  }
}

/* 商品数量调整器 */
.quantity-stepper {
  @include flex(row, flex-start, center);
  
  .btn {
    width: 60rpx;
    height: 60rpx;
    @include flex(row, center, center);
    border: 1px solid $border-color;
    
    &.minus {
      border-radius: $border-radius-xs 0 0 $border-radius-xs;
    }
    
    &.plus {
      border-radius: 0 $border-radius-xs $border-radius-xs 0;
    }
    
    &.disabled {
      color: $text-color-placeholder;
      background-color: $bg-color-light;
    }
  }
  
  .input {
    width: 80rpx;
    height: 60rpx;
    text-align: center;
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    font-size: $font-size-base;
  }
}

/* 横向滚动商品列表 */
.scroll-product-list {
  white-space: nowrap;
  padding: $spacing-base;
  
  .product-item {
    display: inline-block;
    width: 240rpx;
    margin-right: $spacing-base;
    background-color: #fff;
    border-radius: $border-radius-base;
    overflow: hidden;
    
    &:last-child {
      margin-right: 0;
    }
    
    .image {
      width: 240rpx;
      height: 240rpx;
      background-color: $bg-color-light;
    }
    
    .title {
      font-size: $font-size-sm;
      padding: $spacing-xs $spacing-sm;
      @include text-ellipsis();
    }
    
    .price {
      padding: 0 $spacing-sm $spacing-xs $spacing-sm;
    }
  }
}

/* 分割线 */
.divider {
  height: 1px;
  background-color: $border-color-light;
  margin: $spacing-base 0;
  
  &.light {
    background-color: $border-color-light;
  }
}

/* TabBar项高亮样式 */
.tab-bar-highlight {
  color: $primary-color;
  font-weight: bold;
} 